import React, {useState} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Dimensions,
  FlatList,
  Button,
  ScrollView,
  SafeAreaView,
} from 'react-native';
/*
 * 全部图标的查询： https://oblador.github.io/react-native-vector-icons/
 * */
/**
 *由于文件没有使用module.exports方式，所以不能动态引入
 */
/*
import EntypoIcon from 'react-native-vector-icons/Entypo';
import EvilIconsIcon from 'react-native-vector-icons/EvilIcons';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import FoundationIcon from 'react-native-vector-icons/Foundation';
import IoniconsIcon from 'react-native-vector-icons/Ionicons';
import MaterialCommunityIconsIcon from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIconsIcon from 'react-native-vector-icons/MaterialIcons';
import OcticonsIcon from 'react-native-vector-icons/Octicons';
import SimpleLineIconsIcon from 'react-native-vector-icons/SimpleLineIcons';
import ZocialIcon from 'react-native-vector-icons/Zocial'; */
import AntDesign from 'react-native-vector-icons/AntDesign';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import '../utils/myglobal.js';

import icon from 'react-native-paper/src/components/Icon';
import mystyles from './mystyles';
var Icon;
var glyphMap;

const size = 30;
const color = '#000';
let index = 0;
const iconList = [
  'AntDesign',
  'Entypo',
  'EvilIcons',
  'FontAwesome',
  'Foundation',
  'Ionicons',
  'MaterialCommunityIcons',
  'MaterialIcons',
  'Octicons',
  'SimpleLineIcons',
  'Zocial',
];

const IconScreen = ({navigation}) => {
  function select_by_type(type) {
    let Icon;
    let glyphMap;
    console.log('select_by_type: type is ', type);
    if (type == 'AntDesign') {
      Icon = AntDesign;
      glyphMap = require('react-native-vector-icons/glyphmaps/AntDesign.json');
    } /*else if (type == 'Entypo') {
      Icon = EntypoIcon;
      glyphMap = require('react-native-vector-icons/glyphmaps/Entypo.json');
    } else if (type == 'EvilIcons') {
      Icon = EvilIconsIcon;
      glyphMap = require('react-native-vector-icons/glyphmaps/EvilIcons.json');
    } else if (type == 'FontAwesome') {
      Icon = FontAwesomeIcon;
      glyphMap = require('react-native-vector-icons/glyphmaps/FontAwesome.json');
    } else if (type == 'Foundation') {
      Icon = FoundationIcon;
      glyphMap = require('react-native-vector-icons/glyphmaps/Foundation.json');
    } else if (type == 'Ionicons') {
      Icon = IoniconsIcon;
      glyphMap = require('react-native-vector-icons/glyphmaps/Ionicons.json');
    } else if (type == 'MaterialCommunityIcons') {
      Icon = MaterialCommunityIconsIcon;
      glyphMap = require('react-native-vector-icons/glyphmaps/MaterialCommunityIcons.json');
    } else if (type == 'MaterialIcons') {
      Icon = MaterialIconsIcon;
      glyphMap = require('react-native-vector-icons/glyphmaps/MaterialIcons.json');
    } else if (type == 'Octicons') {
      Icon = OcticonsIcon;
      glyphMap = require('react-native-vector-icons/glyphmaps/Octicons.json');
    } else if (type == 'SimpleLineIcons') {
      Icon = SimpleLineIconsIcon;
      glyphMap = require('react-native-vector-icons/glyphmaps/SimpleLineIcons.json');
    } else if (type == 'Zocial') {
      Icon = ZocialIcon;
      glyphMap = require('react-native-vector-icons/glyphmaps/Zocial.json');
    }*/
    return {Icon, glyphMap};
  }
  let [iconType, setIconType] = useState('AntDesign');

  let type = iconType;
  let {Icon, glyphMap} = select_by_type(type);
  console.log('Icon is %o', Icon);
  let names = [];
  for (let name in glyphMap) {
    names.push(name);
  }

  function onNext() {
    index = (index + 1) % iconList.length;
    let t = iconList[index];
    console.log('index is %d, type is %s', index, t);
    setIconType(t);
  }

  return (
    <View style={mystyles.navtab}>
      <Text style={styles.Title}>
        ({index + 1} / {iconList.length}) : {type} ({names.length})
      </Text>
      <Button onPress={onNext} title="下一个" />

      <FlatList
        numColumns={4}
        data={names}
        renderItem={({item}) => (
          <View style={styles.item}>
            <Icon name={item} size={size} color={color} />
            <Text style={styles.text}>{item}</Text>
          </View>
        )}
      />
    </View>
  );
};

var styles = StyleSheet.create({
  item: {
    justifyContent: 'center',
    alignItems: 'center',
    width: Dimensions.get('window').width / 4,
    paddingVertical: 5,
  },
  text: {
    fontSize: 12,
    textAlign: 'center',
  },
  Title: {
    color: '#0000FF',
    textShadowOffset: {width: 3, height: 5},
    textShadowRadius: 9,
    textShadowColor: '#99BBff',
    borderColor: '#0000ff',
    borderWidth: 0,

    textDecorationStyle: 'dashed',
    fontSize: 28,
    fontWeight: '600',
    textAlign: 'center',
  },
});
export default IconScreen;
